<template>
	<div id="app">
		<div class="storeBox">
			<ul class="storeList">
				<li v-for="(item,idx) in todoList" :key="idx">
					<span>{{item.name}}</span>
					<button @click="add(idx)">添加</button>
					<button @click="del(idx)">删除</button>
					<button @click="edit(idx)">修改</button>
				</li>
			</ul>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'App',
		data() {
			return {
				todoList: [],
			}
		},
		created() {
			this.todoList = this.$store.state.todoList
		},
		methods: {
			del(idx) {
				this.$store.commit('delList', idx)
			},
			edit(idx) {
				this.$prompt('请修改name', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({value}) => {
					this.$store.commit('editList',{
						index:idx,
						text:{
							name:value
						}
					})
				}).catch(() => {
				});
			},
			add(idx) {
				this.$prompt('请输入name', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({value}) => {
					this.$store.commit('addList',{
						index:idx+1,
						text:{
							name:value
						}
					})
				}).catch(() => {
				});
			}
		},
		components: {

		}
	}
</script>

<style>
	#app .storeBox .storeList li button {
		margin-left: 10px;
	}
	#app .storeBox .storeList li{
		margin-top: 10px;
	}
	#app .storeBox .storeList li span{
		display: inline-block;
		padding: 0 20px;
	}
</style>
